<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>React App</title>
</head>
<style>
    /* ⽅案2 */
    .wrap {
        width: 400px;
        height: 400px;
        position: relative;
        background: rgb(81, 37, 182);
    }

    .center {
        background: rgb(210, 27, 27);
        /* position: absulote; */
        position: absolute;
        /* left: 50%; */
        /* 只是他的话 就是在中间了 */
        /* 那直接  left: 25%; 可以吗 */
        /* 往左边了 还需要 translateX吗 */
        /* transform: translateX(-50%); */

        left: 25%;
        /* 也不对 那是 1/4 右边的和他重合了 */
        width: 300px;
        height: 300px;
    }

    .container {
        display: grid;
        width: 100%;
        grid-template-rows: 100px;
        /*设置行高*/
        /* 左中右 三个列 */
        grid-template-columns: 100px auto 200px;
        /*设置列数属性*/
    }

    /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-template-columns */
    .left {
        background: red;
    }

    .main {
        background: blue;
    }

    .right {
        background: red;
    }
</style>

<body>
    <div class="wrap">
        <div class="center"></div>
        <!-- <div class="left">left</div>
        <div class="main">center</div>
        <div class="right">right</div> -->
    </div>
</body>

<!-- https://blog.csdn.net/weixin_44135121/article/details/91430443 -->

</html>
<!-- https://blog.csdn.net/ganyingxie123456/article/details/77054124 -->